<script>
    export default {
        name:"MyHeader",
        methods:{
            addTodo(e){
                this.$bus.emit('addTodo',e.target.value)
                e.target.value = ''
            },
            cls(e){
                e.target.classList.add('cls');
                setTimeout(()=>{
                    e.target.classList.remove('cls')
                },599)
            },
            slc(e){
                e.target.classList.add('slc');
                setTimeout(()=>{
                    e.target.classList.remove('slc')
                },599)
            },
        },
        

    }
</script>
<template>
    <div id="headerKj">
        <input type="text" name="" id="todo_txt" placeholder="请输入您的代办" @keydown.enter="addTodo" @focus="cls($event)" @blur="slc($event)">
    </div>

</template>
<style scoped>
    #headerKj{
        height: 5vh;
        line-height: 5vh;
    }
    #todo_txt{
        width: 80%;
        height: 80%;
        border-radius: 10px;
        background-color:rgba(128, 128, 128, 0.438);
        border: 1px solid black;
        text-indent: 1em;
        color: rgb(251, 255, 0);
        font-family: '幼圆';
        font-size: 100%;
    }
    #todo_txt::placeholder{
        color: gainsboro;
    }
    #todo_txt:focus{
        outline: none;
        width: 90%;
        height: 90%;
        box-shadow: 3px 2px 3px rgba(128, 128, 128, 0.336);
    }

    .cls{
        animation: cl 599ms;
    }
    .slc {
        animation: cl 599ms reverse;
    }
    @keyframes cl {
        from {
            width: 80%;
            height: 80%;
        }
        to {
            width: 90%;
            height: 90%;
        }
    }

</style>